<template>
    <div>
        <div>
            <!-- 题目框 -->
            单项选择题目：
            <el-input
            class="inputboxClass"           
            placeholder="编辑题目"
            v-model="wholeTitles.title.content"
            clearable>
            </el-input><br/>

            <!-- 是否必做 -->
            是否必做:
            <el-select v-model="wholeTitles.title.must" placeholder="请选择">
                <el-option
                v-for="item in mustdo"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

            <!-- 循环各个选项 -->
            <div v-for="(item,index) in wholeTitles.choices" :key="index" >  
                <!-- 每个选项 -->
                <el-radio   v-model="radio"    :label="index"  >  
                    {{index+1}}--<el-input v-model="wholeTitles.choices[index].content"/>
                </el-radio>
            </div>

           <br/>
            <button @click="log()" v-show="false">打印</button>
            <button @click="add()">增加</button>
            <button @click="del()">删除</button><br/> 
             <br/>
              <br/>
               <br/>

        </div>
    </div>

</template>

<script>
export default {
//大概思路：使用radio代表当前的选项；items数组中存储选项信息，选项对象中的content为题目内容；items数组的第一个对象的content为空
//编辑框的内容绑定items中的当前radio的content。默认radio为0，以及清空时将radio设为0，达到使得编辑框没有任何内容的效果
//由于elementui的单选框中，点击某个选项表示将v-model绑定的值变成选中的label的值，所以可以通过点击显示对应items的content
//增加功能：其实就是push一个新的对象
    data(){
        return{
            count:4,                                      //题目数量  
            radio: '0',                                   //双向绑定了用户选中的选项    
            mustdo:[{
                value: 1,                                   //1:必做
                label: '必做'                               //2：非比做
            },{
                value: 2,                               
                label:'非比做'
            }],
            //返回的数据
            wholeTitles:{
                title:{
                    type:'',
                    must: 1,
                    content:'',
                    titNum:'',                      
                },
                choices: [                       //选项的信息  
                    {
                    choiceNum: 1,                                  //choiceNum表示选项号 
                    content: "选项1"                             //表示内容
                    },{    
                    choiceNum:2,    
                    content: "选项2"
                    },{     
                    choiceNum: 3,             
                    content: "选项3"
                    }]
            },         
        }
    },
    methods: {
        add(){
            this.wholeTitles.choices.push({
                content:   "选项"+this.count,
                choiceNum: this.count});
            this.count++;
            
        },
        del(){
            this.radio=0;
            this.wholeTitles.choices.pop();
            this.count--;
            
        },
        log(){
            console.log(this.wholeTitles);
            console.log(this.wholeTitles.choices);
            console.log(this.temp);
        }
    },
    props: {
        temp:{}
    },
    created () {
        console.log(this.temp);
        console.log("temp:");
        //console.log(this.temp.choices.length);
        if((this.temp.choices).length==0){
            this.wholeTitles.title=this.temp.title;
        }else{
            this.wholeTitles=this.temp;
        }
        
        //console.log(this.wholeTitles)
    }
    
}
</script>
<style  scoped>
.inputboxClass{
    width: 300px;

}


</style>
